<template>
  <div class="schedule-management-container">
    <!-- 查询 -->
    <div class="search-container">
      <el-input
          v-model="searchQuery"
          placeholder="按姓名或日期搜索"
          class="search-input"
          @keyup.enter="fetchSchedules"
      ></el-input>
      <el-button
          @click="fetchSchedules"
          type="primary"
          class="search-button"
      >
        查询
      </el-button>
    </div>

    <!-- 错误信息 -->
    <div class="error-message">{{ errorMessage }}</div>

    <!-- 排班信息表格 -->
    <el-table
        :data="schedules"
        class="schedule-table"
        header-cell-class-name="table-header"
    >
      <el-table-column
          label="序号"
          type="index"
          width="60px"
          align="center"
      ></el-table-column>
      <el-table-column
          prop="employeeName"
          label="员工姓名"
          width="120px"
          align="center"
      ></el-table-column>
      <el-table-column
          prop="scheduleDate"
          label="排班日期"
          width="120px"
          align="center"
          :formatter="formatDate"
      ></el-table-column>
      <el-table-column
          prop="startTime"
          label="上班时间"
          width="120px"
          align="center"
          :formatter="formatTime"
      ></el-table-column>
      <el-table-column
          prop="endTime"
          label="下班时间"
          width="120px"
          align="center"
          :formatter="formatTime"
      ></el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
          background
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          class="pagination"
      />
    </div>

    <!-- 导出功能 -->
    <div class="export-container">
      <el-button
          @click="exportSchedules"
          type="success"
          class="export-button"
      >
        导出排班表
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';


const schedules = ref([]);
const searchQuery = ref('');
const errorMessage = ref('');
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);

const formatDate = (row, column) => {
  if (!row[column.property]) return '';
  return new Date(row[column.property]).toLocaleDateString();
};

const formatTime = (row, column) => {
  if (!row[column.property]) return '';
  return new Date(row[column.property]).toLocaleTimeString();
};

const fetchSchedules = async () => {
  try {
    const response = await axios.post('/api/getSchedules', {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      searchQuery: searchQuery.value,
    });
    schedules.value = response.data.records || [];
    total.value = response.data.total || 0;
    errorMessage.value = '';
  } catch (error) {
    errorMessage.value = `获取排班信息出错：${error.message}`;
  }
};

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  fetchSchedules();
};

const handlePageChange = (newPage) => {
  pageNum.value = newPage;
  fetchSchedules();
};

const exportSchedules = async () => {
  try {
    const response = await axios.post('/api/exportSchedules', {
      searchQuery: searchQuery.value,
    }, { responseType: 'blob' });
    saveAs(response.data, 'schedules.csv');
  } catch (error) {
    errorMessage.value = `导出排班表出错：${error.message}`;
  }
};

onMounted(fetchSchedules);
</script>

<style scoped>
.schedule-management-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.search-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.search-input {
  width: 200px;
  margin-right: 10px;
}

.search-button {
  margin-right: 20px;
}

.error-message {
  color: #f56c6c;
  margin-bottom: 20px;
  text-align: center;
}

.schedule-table {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.table-header {
  background-color: #f0f2f5;
  font-weight: bold;
  color: #333;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.pagination {
  width: 100%;
}

.export-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.export-button {
  width: 150px;
  font-weight: bold;
  font-size: 16px;
}
</style>